<template>
    <!-- 维修工单 -->
    <div class="layout-padding">
      <basic-container class="layout-padding-auto layout-padding-view">
        <avue-crud
            v-model='form'
            ref='crud'
            :before-open='handleOpenBefore'
            :page='page'
            :data='tableData'
            :permission='permissionList'
            :table-loading='tableLoading'
            :option='tableOption'
            :cell-class-name='addClass'
            @on-load='getList'
            @search-change='searchChange'
            @refresh-change='refreshChange'
            @size-change='sizeChange'
            @current-change='currentChange'
            @row-click='clickCell'
            @row-update='handleUpdate'
            @row-save='handleSave'
            @row-del='rowDel'
            @selection-change='selectionChange'
        >
          <template #menu='scope'>
            <el-button type='primary'
                       icon='el-icon-edit'
                       text
                       :disabled='scope.row.orderStatus==="8"'
                       @click='$refs.crud.rowEdit(scope.row,scope.index)'>编辑
            </el-button>
             <el-button type='primary'
                        text
                        icon='el-icon-delete'
                        @click='$refs.crud.rowDel(scope.row,scope.index)'>删除
            </el-button>
            <el-dropdown >
              <span class='el-dropdown-link'>
                操作
                <el-icon class='el-icon--right'>
                  <arrow-down/>
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                      :disabled="
                      scope.row.orderStatus === '1' ||
                      scope.row.orderStatus === '2' ||
                      scope.row.orderStatus === '6' ||
                      scope.row.orderStatus === '7' ||
                      scope.row.orderStatus === '8'
                    "
                      @click='appoint(scope.row)'
                  >指派
                  </el-dropdown-item
                  >
                  <el-dropdown-item
                      :disabled="scope.row.orderStatus === '8'"
                      @click='closeOrder(scope.row)'
                  >关闭
                  </el-dropdown-item
                  >
                  <el-dropdown-item
                      :disabled="
                      scope.row.orderStatus === '0' ||
                      scope.row.orderStatus === '1' ||
                      scope.row.orderStatus === '2'
                    " @click='confirmOrder(scope.row)'>评价
                  </el-dropdown-item>
                  <el-dropdown-item
                      @click='complainOrder(scope.row)'
                  >投诉
                  </el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
  
          </template>
          <template #menu-left>
            <!-- v-if='permissions.om_omrepairorder_del' -->
            <el-button
               
                style='margin-top: 5px'
                plain
                type='primary'
                icon='el-icon-delete'
                @click='plDelete'
            >
              批量删除
            </el-button>
            <!--            <el-button-->
            <!--                v-if='permissions.om_omrepairorder_export'-->
            <!--                class="filter-item"-->
            <!--                plain-->
            <!--                type="primary"-->
            <!--                icon="el-icon-download"-->
            <!--                @click="exportExcel">导出-->
            <!--          </el-button>-->
          </template>
  
          <template #equipArea-form>
            <avue-input-tree
                filterable
                v-model='form.equipArea'
                :dic='treeAreaData'
                :props='areaProps'
                type='tree'
                placeholder='请选择报修区域'
            ></avue-input-tree>
          </template>
          <template #equipName-form>
            <div class='span-title'>
              <div class='span-input'>
                <el-input
                    :disabled="
                    form.orderType == '2' ||
                    form.orderType == '3' ||
                    form.orderType == '4' ||
                    form.orderType == '5' ||
                    form.orderType == '6'
                  "
                    v-model='form.equipName'
                    placeholder='请选择设备'
                ></el-input>
              </div>
              <div class='span-btn'>
                <el-button
                    type='primary'
                    plain
                    @click='getDevForm'
                    :disabled="
                    form.orderType == '2' ||
                    form.orderType == '3' ||
                    form.orderType == '4' ||
                    form.orderType == '5' ||
                    form.orderType == '6'
                  "
                >选择设备
                </el-button
                >
              </div>
            </div>
          </template>
          <template #appointTime-form>
            <el-radio v-model='radio' label='1'>立即维修</el-radio>
            <el-radio v-model='radio' label='2'>预约维修</el-radio>
            <el-date-picker
                :disabled="radio == '1'"
                v-model='form.appointTime'
                type='datetime'
                placeholder='选择日期时间'
                format='YYYY/MM/DD hh:mm:ss'
                value-format='YYYY-MM-DD hh:mm:ss'>
            </el-date-picker>
          </template>
          <template #appointType-form>
            <el-radio v-model='radio1' label='1' @change='radioChange'>未指派</el-radio>
            <el-radio v-model='radio1' label='2'>指派</el-radio>
            <el-button v-show='radio1==="2"' type='primary' plain @click='appointUser'>{{
                form.handleUserName ? form.handleUserName : '选择指派人'
                                                                                       }}
            </el-button>
          </template>
          <template #orderStatus='{ row }'>
            <el-tag v-if="row.orderStatus == '0'">未指派</el-tag>
            <el-tag v-if="row.orderStatus == '1'">已指派</el-tag>
            <el-tag type='warning' v-if="row.orderStatus == '2'">处理中</el-tag>
            <el-tag type='warning' v-if="row.orderStatus == '3'">出发中</el-tag>
            <el-tag type='info' v-if="row.orderStatus == '4'">挂起</el-tag>
            <el-tag type='warning' v-if="row.orderStatus == '5'">已到达</el-tag>
            <el-tag type='success' v-if="row.orderStatus == '6'">已处理</el-tag>
            <el-tag type='success' v-if="row.orderStatus == '7'">已解决</el-tag>
            <el-tag type='info' v-if="row.orderStatus == '8'">已关闭</el-tag>
            <el-tag type='info' v-if="row.orderStatus == '9'">已取消</el-tag>
          </template>
          <template #fileList-form>
            <ImgUpload @changeFile='changeFile' :fileData='fileData'/>
          </template>
        </avue-crud>
      </basic-container>
<!--      <el-dialog-->
<!--          v-if='dialogFormVisible0'-->
<!--          v-model='dialogFormVisible0'-->
<!--          title='指派工单'-->
<!--          width='28%'-->
<!--          @close='dialogFormVisible0 = false'-->
<!--      >-->
<!--        <el-form-item label='处理部门' required>-->
<!--          <avue-input-tree-->
<!--              v-model='form.handleUserDeptId'-->
<!--              :dic='handleDeptData'-->
<!--              :props='defaultProps1'-->
<!--              filterable-->
<!--              placeholder='请选择处理部门'-->
<!--              type='tree'-->
<!--              style='width: 300px'-->
<!--          >-->
<!--          </avue-input-tree>-->
<!--        </el-form-item>-->
<!--        <el-form-item label='处理人员' required>-->
<!--          <avue-select-->
<!--              v-model='form.handleUserId'-->
<!--              :dic='handleUserData'-->
<!--              :props='defaultProps2'-->
<!--              filterable-->
<!--              placeholder='请选择处理人员'-->
<!--              style='width: 300px'-->
<!--          >-->
<!--          </avue-select>-->
<!--        </el-form-item>-->
<!--        <template #footer>-->
<!--          <span class='dialog-footer'>-->
<!--            <el-button @click='dialogFormVisible0 = false'>取消</el-button>-->
<!--            <el-button type='primary' @click='dialogFormVisible0 = false'> 确定 </el-button>-->
<!--          </span>-->
<!--        </template>-->
<!--      </el-dialog>-->
      <el-dialog
          v-if='dialogFormVisible'
          v-model='dialogFormVisible'
          title='指派工单'
          width='38%'
          @close='dialogFormVisible = false'
      >
        <el-form-item label='处理部门' required>
          <avue-input-tree
              v-model='handleDept'
              :dic='handleDeptData'
              :props='defaultProps1'
              filterable
              placeholder='请选择处理部门'
              type='tree'
              style='width: 300px'
          >
          </avue-input-tree>
        </el-form-item>
        <el-form-item label='处理人员' required>
          <avue-select
              v-model='handleUser'
              :dic='handleUserData'
              :props='defaultProps2'
              @change='handleSelectChange'
              filterable
              placeholder='请选择处理人员'
              style='width: 300px'
          >
          </avue-select>
        </el-form-item>
        <el-form-item label='处理意见'>
          <el-input type='textarea' v-model='handleSug'></el-input>
        </el-form-item>
        <template #footer>
          <span class='dialog-footer'>
            <el-button @click='dialogFormVisible = false'>取消</el-button>
            <el-button type='primary' @click='handleOrder'> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog
          v-if='dialogFormVisible1'
          v-model='dialogFormVisible1'
          title='关闭工单'
          width='38%'
          @close='dialogFormVisible1 = false'
      >
        <el-form-item label='关闭意见'>
          <el-input type='textarea' v-model='closeSug'></el-input>
        </el-form-item>
        <template #footer>
          <span class='dialog-footer'>
            <el-button @click='dialogFormVisible1 = false'>取消</el-button>
            <el-button type='primary' @click='handleClose'> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog
          v-if='dialogFormVisible3'
          v-model='dialogFormVisible3'
          title='评价工单'
          width='38%'
          @close='dialogFormVisible3 = false'
      >
        <el-form-item label='满意程度'>
          <el-rate v-model='rateValue' :max='5' show-score score-template='{value}分'></el-rate>
        </el-form-item>
        <el-form-item label='评价意见'>
          <el-input type='textarea' v-model='confirmSug'></el-input>
        </el-form-item>
        <template #footer>
          <span class='dialog-footer'>
            <el-button @click='dialogFormVisible3 = false'>取消</el-button>
            <el-button type='primary' @click='confirmAppraise'> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog
          v-if='dialogFormVisible2'
          v-model='dialogFormVisible2'
          title='投诉工单'
          width='38%'
          @close='dialogFormVisible2 = false'
      >
        <el-form-item label='投诉意见'>
          <el-input type='textarea' v-model='complainSug'></el-input>
        </el-form-item>
        <template #footer>
          <span class='dialog-footer'>
            <el-button @click='dialogFormVisible2 = false'>取消</el-button>
            <el-button type='primary' @click='handleComplain'> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <OrderInfo ref='orderinfo'></OrderInfo>
      <DevForm ref='devFormRef' @getDeviceName='getDeviceName'></DevForm>
    </div>
  </template>
  
  <script>
  import {
    fetchList,
    addObj,
    putObj,
    delObj,
    getDeptTree,
    getUser,
    operaOrder,
    getUserById,
    delObjAll,
    getOrderName,
    getOrderCount,
  } from '/@/api/maintenance/order'
  import {getDeviceType, getDevtype, getAssets} from '/@/api/check/omicheckpoint'
  import OrderInfo from './info/index.vue'
  import DevForm from '/@/views/om/eventmanagement/devForm/index.vue'
  import {fetchTree} from '/@/api/maintenance/event'
  import {tableOption} from '/@/const/crud/maintenance/order'
//   import {mapGetters} from 'vuex'
  import ImgUpload from '/@/components/ImageUpload/order.vue'
  
  export default {
    name: 'order',
    components: {ImgUpload, OrderInfo, DevForm},
    data() {
      return {
        form: {},
        treeLocationData: [],
        defaultPropstree: {
          label: 'faultLevle',
          value: 'stId'
        },
        searchForm: {},
        tableData: [],
        equipData: [],
        fileList: [],
        fileData: [],
        areaProps:{
          label: 'subareaCn',
          value: 'subareaCode',
          children:'childrens'
        },
        defaultProps: {
          label: 'assetsName',
          value: 'assetsName'
        },
        defaultProps5: {
          label: 'bamAssetsTypeAlias',
          value: 'bamAssetsTypeCode'
        },
        defaultProps6: {
          label: 'bamAAssetsModelCn',
          value: 'bamAAssetsDeviceCode'
        },
        defaultProps7: {
          label: 'assetsName',
          value: 'assetsName'
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        radio: '1',
        radio1: '1',
        appointTime: '',
        tableLoading: false,
        dialogFormVisible0: false,
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        orderVisible: false,
        tableOption: tableOption,
        handleDept: '',
        handleUser: '',
        handleSug: '',
        confirmSug: '',
        closeSug: '',
        complainSug: '',
        orderNo: '',
        rateValue: 0,
        handleDeptData: [],
        handleUserData: [],
        handleUserData2: [],
        orderUserData: [],
        approveUserData: [],
        modelTypeData: [],
        devTypeData: [],
        deviceNameData: [],
        treeAreaData: [],
        defaultProps1: {
          label: 'name',
          value: 'id'
        },
        defaultProps2: {
          label: 'name',
          value: 'userId'
        },
        selectList: [],
        openType: '',
        handleUserName: '', // 指派工单中文名
      }
    },
    computed: {
    //   ...mapGetters(['permissions', 'userInfo']),/
      permissionList() {
        return {
        //   getBtn: this.validData(this.permissions.om_omrepairorder_get, false),
        //   delBtn: this.validData(this.permissions.om_omrepairorder_del, false),
        //   editBtn: this.validData(this.permissions.om_omrepairorder_edit, false)
        }
      }
    },
    watch: {
      'form.orderType': {
        handler(val, oldVal) {
          if (val && val !== oldVal && this.openType == 'add') {
            let type =
                val == 0
                    ? '设备报修'
                    : '' || val == 1
                        ? '设备维保'
                        : '' || val == 2
                            ? '卫生处理'
                            : '' || val == 3
                                ? '纠纷处理'
                                : '' || val == 4
                                    ? '建筑设施'
                                    : '' || val == 5
                                        ? '设施损坏'
                                        : '' || val == 6
                                            ? '其他'
                                            : '';
            getOrderName(type).then((res) => {
              this.form.orderName = res.data;
            });
          }
        }
      },
      'form.handleUserId': {
        handler(val) {
          if (val) {
            getUserById(val).then((res) => {
              this.handleUserData2 = res.data
              this.form.handleUserPhone = this.handleUserData2.phone
              this.form.handleUserName = this.handleUserData2.name
              // this.form.handleUserPhone = this.handleUserData2.phone
            })
          }
        }
      },
      'form.orderUserId': {
        handler(val) {
          if (val) {
            getUserById(val).then((res) => {
              this.orderUserData = res.data
              if (this.orderUserData) {
                this.form.orderUserName = this.orderUserData.name
                this.form.orderUserPhone = this.orderUserData.phone
              }
            })
          } else {
            // this.form.orderUserPhone = ''
          }
        }
      },
      'form.approveUserName': {
        handler(val) {
          if (val) {
            getUserById(val).then((res) => {
              this.approveUserData = res.data
              this.form.approveUserPhone = this.approveUserData.phone
            })
          } else {
            this.form.approveUserPhone = ''
          }
        }
      },
      'form.assetsType': {
        handler(val, oldVal) {
          if (val && val !== oldVal) {
            getDeviceType({bamAssetsTypeMcode: val}).then((res) => {
              this.modelTypeData = res.data
            })
          } else {
            this.form.modelType = ''
          }
        }
      },
      'form.modelType': {
        handler(val, oldVal) {
          if (val && val !== oldVal) {
            getDevtype({bamAAssetsModelCode: val}).then((res) => {
              this.devTypeData = res.data
            })
          } else {
            this.form.devType = ''
          }
        }
      },
      'form.devType': {
        handler(val, oldVal) {
          if (val && val !== oldVal) {
            getAssets({devType: val, eStatus: 1}).then((res) => {
              this.deviceNameData = res.data
            })
          } else {
            this.form.equipId = ''
          }
        }
      },
      'form.equipId': {
        handler(val, oldVal) {
          if (val && val !== oldVal) {
            let list = this.deviceNameData.find((item) => item.assetsName === val)
            if (list) {
              this.form.equipNo = list.deviceNo
              this.form.equipName = list.assetsName
            }
          }
        }
      },
      'form.handleUserDeptId': {
        handler(val, oldVal) {
          if (val && val !== oldVal) {
            getUser(val).then((res) => {
              console.log('res',res)
              this.handleUserData = res.data.records
              this.handleUser = ''
            })
          }
        }
      },
  
      handleDept(val, oldVal) {
        if (val && val !== oldVal) {
          getUser(val).then((res) => {
            console.log('res',res)
            this.handleUserData = res.data.records
            this.handleUser = ''
          })
        }
      },
      dialogFormVisible(val) {
        if (!val) {
          this.handleDept = ''
          this.handleUser = ''
          this.handleSug = ''
        }
      },
      dialogFormVisible3(val) {
        if (!val) {
          this.rateValue = 0
          this.confirmSug = ''
        }
      },
      // 关闭弹出框
      dialogFormVisible1(val) {
        if (!val) {
          this.closeSug = ''
        }
      },
      // 投诉弹出框
      dialogFormVisible2(val) {
        if (!val) this.complainSug = ''
      }
    },
  
    methods: {
      handleSelectChange(val) {
        let obj = this.handleUserData.find((item) => {
          return item.userId === val.value
        })
        this.handleUserName = obj.name
      },
      // 维修方式单选框
      radioChange() {
        this.form.handleUserDeptId = ''
        this.form.handleUserId = ''
        this.form.handleUserName = ''
        this.form.handleUserPhone = ''
      },
      selectionChange(list) {
        this.selectList = list
      },
      handleLocation() {
        fetchTree().then((response) => {
          this.treeLocationData = response.data.records
        })
      },
      handleOpenBefore(show, type) {
        this.openType = type
        if (type === 'edit') {
          this.fileData = this.form.fileList
          if (this.form.appointTime) {
            this.radio = '2'
          } else {
            this.radio = '1'
          }
        }
        if (type === 'add') {
          this.radio = '1'
          this.radio1 = '1'
          this.fileData = []
          getUserById(this.userNameId).then((res) => {
            let list = res.data.data
            this.form.orderUserId = list.userId
            this.form.orderUserDeptId = list.deptId
            this.form.orderUserPhone = list.phone
          })
          this.$refs.devFormRef.selectRow = -1
        }
        fetchTree().then((res) => {
          this.treeAreaData = res.data.records
        })
        show()
        this.handleLocation()
      },
      getList(page, params) {
        this.tableLoading = true
        fetchList(
            Object.assign(
                {
                  current: page.currentPage,
                  size: page.pageSize
                },
                params,
                this.searchForm
            )
        )
            .then((response) => {
              this.tableData = response.data.records
              this.page.total = response.data.total
              this.tableLoading = false
            })
            .catch(() => {
              this.tableLoading = false
            })
      },
      rowDel: function (row, index) {
        this.$confirm('是否确认删除ID为' + row.orderNo, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(function () {
              return delObj(row.orId)
            })
            .then((data) => {
              this.$message.success('删除成功')
              this.getList(this.page)
            })
            .catch((cancelorerror) => {
            })
      },
      // handleRowClick(row, event, column) {
      //   console.log(event, column)
      //   this.$refs.orderinfo.dialogVisible = true
      //   this.$refs.orderinfo.infoData = row
      // },
      clickCell(row, column, cell, event) {
        if (column?.property === "orderNo") {
          this.$refs.orderinfo.dialogVisible = true
          this.$refs.orderinfo.infoData = row
        }
      },
  
      handleUpdate: function (row, index, done, loading) {
        // debugger
        putObj(row)
            .then((data) => {
              this.$message.success('修改成功')
              done()
              this.getList(this.page)
            })
            .catch(() => {
              loading()
            })
      },
      handleSave: function (row, done, loading) {
        // row.applyFile = row.applyFile[0]
        this.form.handleUserName.length === 0 ? row.appointType = 1 + '' : row.appointType = 2 + ''
        addObj(row)
            .then((data) => {
              this.$message.success('添加成功')
              done()
              this.getList(this.page)
              this.getCount()
            })
            .catch(() => {
              loading()
            })
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      refreshChange() {
        this.getList(this.page)
      },
      appoint(row) {
        this.dialogFormVisible = true
        this.orderNo = row.orderNo
        getDeptTree().then((res) => {
          this.handleDeptData = res.data
        })
      },
      handleOrder() {
        let obj = {
          orderNo: this.orderNo,
          remark: this.handleSug,
          orderStatus: 1 + '',
          handleUserDeptId: this.handleDept,
          handleUserId: this.handleUser,
          handleUserName: this.handleUserName
        }
        if (obj.handleUserDeptId && obj.handleUserId) {
          operaOrder(obj)
              .then((res) => {
                this.$message.success('工单指派成功')
                this.dialogFormVisible = false
                this.getList(this.page)
                this.getCount()
              })
              .catch((err) => this.$message.error(err))
        } else {
          this.$message.warning('请选择处理部门和处理人员')
        }
      },
      closeOrder(row) {
        this.dialogFormVisible1 = true
        this.orderNo = row.orderNo
      },
      handleClose() {
        let obj = {
          orderNo: this.orderNo,
          remark: this.closeSug,
          orderStatus: 8 + ''
        }
        operaOrder(obj)
            .then((res) => {
              this.$message.success('工单已关闭')
              this.dialogFormVisible1 = false
              this.getList(this.page)
            })
            .catch((err) => this.$message.error(err))
      },
      complainOrder(row) {
        this.dialogFormVisible2 = true
        this.orderNo = row.orderNo
      },
      handleComplain() {
        let obj = {
          orderNo: this.orderNo,
          remark: this.complainSug,
          orderStatus: 10 + ''
        }
        operaOrder(obj)
            .then((res) => {
              this.$message.success('工单已投诉')
              this.dialogFormVisible2 = false
              this.getList(this.page)
            })
            .catch((err) => this.$message.error(err))
      },
      //评价工单
      confirmOrder(row) {
        this.orderNo = row.orderNo
        this.dialogFormVisible3 = true
      },
      confirmAppraise() {
        let obj = {
          orderNo: this.orderNo,
          evaluation: this.confirmSug,
          satisfaction: this.rateValue + '',
          orderStatus: 7 + ''
        }
        operaOrder(obj)
            .then((res) => {
              this.$message.success('工单已评价')
              this.dialogFormVisible3 = false
              this.getList(this.page)
            })
            .catch((err) => this.$message.error(err))
      },
      //删除附件cell-blue
      // uploadDelete(file, column) {
      //   console.log(file)
      //   return this.$confirm('是否确定移除该选图片？')
      // },
      changeFile(list) {
        this.form.fileList = list
        this.form.fileList.forEach((item) => {
          item.orderNo = this.form.orderNo
        })
      },
      addClass({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 2) {
          return 'cell-blue'
        }
      },
      //批量删除
      plDelete() {
        if (this.selectList.length > 0) {
          this.$confirm('是否确认删除以选择的数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
              .then(() => {
                let ids = []
                this.selectList.forEach((data) => {
                  ids.push(data.orId)
                })
                return delObjAll(ids)
              })
              .then((data) => {
                this.$message.success('删除成功')
                this.getList(this.page)
              })
              .catch((cancelorerror) => {
              })
        }
      },
      getDevForm() {
        this.$refs.devFormRef.visible = true
      },
      getDeviceName(list) {
        this.form.equipName = list.deviceName
        this.form.equipNo = list.unitNo
        this.form.equipArea = list.subareaCode
      },
      appointUser() {
        this.dialogFormVisible0 = true
        getDeptTree().then((res) => {
          this.handleDeptData = res.data
        })
      },
      getCount() {
        getOrderCount({handleUserId: this.userInfo.userId}).then((res) => {
          let list = res.data
          this.$store.commit('setOrderCount', list.orderCount)
          this.$store.commit('setComplainCount', list.complainCount)
        })
      },
      // 导出
      exportExcel() {
        this.downBlobFile('/om/omrepairmodel/export', this.searchForm, '设备维修模版.xlsx')
      },
    }
  }
  </script>
  
  <style lang='scss' scoped>
  // ::v-deep .el-input__inner {
  //   cursor: pointer;
  // }
  ::v-deep .el-table__row {
    cursor: pointer !important;
  }
  
  .span-title {
    display: flex;
  
    .span-input {
      flex: 2;
    }
  }
  
  .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
  
  .theme-white .el-dropdown {
    color: #399bff;
    font-size: 13px;
    margin: 8px 0 0 16px;
  
    .el-icon--right {
      margin-left: 0;
    }
  }
  </style>
  
  <style>
  .cell-blue {
    color: #409eff !important;
    cursor: pointer !important;
  }
  </style>
  